<template>
  <div class="container">
    <el-card>
      <div class="title">
        <el-tabs stretch v-model="activeName">
          <el-tab-pane label="账号登录" name="passwordLogin">
            <AccountLogin />
          </el-tab-pane>
          <el-tab-pane label="扫码登录" name="qrcodeLogin" >
            <QrcodeLogin />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'
import AccountLogin from './account-login.vue'
import QrcodeLogin from './qrcode-login.vue';
export default {
  name: 'LoginForm',
  components:{AccountLogin,QrcodeLogin},
  setup(){
    const activeName = ref('passwordLogin')
    return{
      activeName
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  position: relative;
}
.el-card{
  position: absolute;
  top: 10px;
  right: 30px;
  right: 20px;
  width: 300px;
  height: 400px;
  opacity:.6;
}
</style>
